<template>
  <Layout ref="layout" :tabs="tabs" :init-status="1" :fetch-data="getOrders" @change="onListChange">
    <template>
      <OrderList :data="list" type="base" />
    </template>
  </Layout>
</template>

<script>
import OrderFilter from "./OrderFilter.vue";
import OrderList from "./OrderList.vue";
import List from "../../../components/public/List/index.vue";
import Layout from "./Layout.vue";
import { mapActions } from "vuex";
export default {
  components: {
    OrderFilter,
    OrderList,
    List,
    Layout
  },
  data() {
    return {
      searchParams: {
        // page: 1,
        // pageSize: 10,
        startTime: "",
        endTime: ""
      },
      list: [],
      finished: false,
      loading: true,
      total: null,
      tabs: [
        { value: 0, label: "待付款" },
        { value: 1, label: "已付款" }, // 待接单
        // { value: 2, label: "待配送" }, // 已接单
        // { value: 3, label: "已配送" },
        // { value: 4, label: "已收货" },
        { value: 5, label: "已评价" },
        { value: -1, label: "已取消" }
      ]
    };
  },
  created() {
    // 初始化日期
    this.searchParams.startTime = this.$day()
      .subtract(1, "years")
      .format("YYYY-MM-DD");
    this.searchParams.endTime = this.$day().format("YYYY-MM-DD HH:mm:ss");
  },
  methods: {
    ...mapActions({
      getOrders: "getOrders"
    }),
    onListChange(list = []) {
      this.list = list;
    },
    init(params = {}) {
      this.$refs.layout.init(params);
    }
  }
};
</script>

<style scoped lang="scss">
.base-wrap {
  height: 100%;
  .list-wrap {
    // margin-top: 30rpx;
    // margin-top: 10rpx;
    padding: 0 20rpx;
    box-sizing: border-box;
    height: 100%;
  }
}
</style>
